<template>
  <div class="home">
    <div class="titlebox">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>年度协议管理</el-breadcrumb-item>
        <el-breadcrumb-item>二级商协议</el-breadcrumb-item>
        <el-breadcrumb-item>新增二级商协议</el-breadcrumb-item>
      </el-breadcrumb>
      <h2>新增二级商协议</h2>
    </div>
    <div class="divider">
      <div class="xian"></div>
      <div class="conter">
        <div class="num">1</div>
        <div class="txt">协议主体</div>
      </div>
      <div class="xian"></div>
    </div>
    <div class="input-box">
      <div class="left">
        <div class="item">
          <span><sup style="color: red;">*</sup> 协议客户：</span>
          <div class="xz">选择客户</div>
          <div class="item-txt">上海正也医药有限公司</div>
        </div>
        <div class="item">
          <div class="item-title">购进指标：</div>
          <el-select v-model="value" placeholder="请选择">
            <el-option label="金额" value="0"></el-option>
            <el-option label="数量" value="1"></el-option>
          </el-select>
          <div class="disabled">
            <el-input placeholder="输入金额/数量" v-model="input" :disabled="true">
            </el-input>
          </div>
        </div>
        <div class="item">
          <span class="item-title"> 销售区域：</span>
          <div class="xz">选择区域</div>
          <div class="item-qy"> <span>全国</span> <i class="el-icon-close" color="#4d8cff"></i></div>
        </div>
        <div class="item">
          <span class="item-title"> 购进渠道：</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option label="指定渠道" value="0"></el-option>
          </el-select>
          <div class="xz">请选择渠道</div>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <div class="item-title">协议状态：</div>
          <div class="">
            <el-select v-model="value" placeholder="请选择">
              <el-option label="正常" value="0"></el-option>
              <el-option label="异常" value="1"></el-option>
            </el-select>
          </div>
        </div>
        <div class="item">
          <div class="item-title">纯销指标：</div>
          <el-select v-model="value1" placeholder="请选择">
            <el-option label="金额" value="0"></el-option>
            <el-option label="数量" value="1"></el-option>
          </el-select>
          <div class="disabled">
            <el-input placeholder="输入金额/数量" v-model="input" :disabled="true">
            </el-input>
          </div>
        </div>
        <div class="item">
          <div class="item-title">签订时间：</div>
          <div class="time">
            <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
          </div>

        </div>
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f8f8f8' }">
          <el-table-column prop="date" label="指定渠道编码">
          </el-table-column>
          <el-table-column prop="name" label="指定渠道名称">
          </el-table-column>
          <el-table-column prop="address" label="所在省">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="divider">
      <div class="xian"></div>
      <div class="conter">
        <div class="num">2</div>
        <div class="txt">产品政策</div>
      </div>
      <div class="xian"></div>
    </div>
    <div class="titlelist">
      <el-button type="primary" style="margin-right: 25px;">添加产品</el-button>
      <div class="list">
        <div class="txt">
          购进总指标（万元）
          <span class="color">
            ￥152.65
          </span>
        </div>
      </div>
      <div class="list">
        <div class="txt">
          指标按季度分解（万元）
          <span class="color">
            【Q1】￥12.5,
          </span>
          <span class="color">
            【Q2】￥12.5,
          </span>
          <span class="color">
            【Q3】￥12.5,
          </span>
          <span class="color">
            【Q4】￥12.5,
          </span>
        </div>
      </div>
      <div class="list">
        <div class="txt">
          纯销总指标（万元）
          <span class="color">
            ￥152.65
          </span>
        </div>
      </div>
    </div>
    <div class="cp">
      <div class="cp-topbox">
        <div class="left">
          <div class="cp-item">
            <div class="cp-top">
              产品：
              <div class="xz">选择产品</div>
              <div class="color">美复胶丸 24粒/盒</div>
            </div>
          </div>
          <div class="cp-item">
            协议效期：
            <el-date-picker v-model="time" type="daterange" range-separator="~" prefix-icon="none"
              start-placeholder="开始日期" end-placeholder="结束日期" @change="change">
            </el-date-picker>
          </div>
        </div>
        <div class="del">删除</div>
      </div>
      <div class="xian"></div>
      <div class="box">
        <div class="top">
          <div class="top-item">协议价（元）</div>
          <div class="top-item">票折（元）</div>
          <div class="top-item">购进指标量（大单位）</div>
          <div class="top-item">购进指标量（小单位）</div>
          <div class="top-item">购进金额（万元）</div>
          <div class="top-item">纯销指标量（小单位）</div>
          <div class="top-item">纯销指标金额（万元）</div>
        </div>
        <div class="bottom">
          <div class="input">
            <el-input placeholder="请输入" v-model="input" :disabled="true">
            </el-input>
          </div>
          <div class="input">
            <el-input placeholder="请输入" v-model="input" :disabled="true">
            </el-input>
          </div>
          <div class="input">
            <el-input placeholder="请输入" v-model="input" :disabled="true">
            </el-input>
          </div>
          <div class="input">
            <el-input placeholder="请输入" v-model="input" :disabled="true">
            </el-input>
          </div>
          <div class="input">
            <el-input placeholder="请输入" v-model="input" :disabled="true">
            </el-input>
          </div>
          <div class="input">
            <el-input placeholder="请输入" v-model="input" :disabled="true">
            </el-input>
          </div>
          <div class="input">
            <el-input placeholder="请输入" v-model="input" :disabled="true">
            </el-input>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="top">
          <div class="top-item">分销奖励</div>
          <div class="top-item">费用科目</div>
          <div class="top-item">零售配送</div>
          <div class="top-item">费用科目</div>
          <div class="top-item">医疗配送商</div>
          <div class="top-item">费用科目</div>
          <div class="top-item">自定义7</div>
          <div class="top-item">自定义8</div>
        </div>
        <div class="bottom">
          <div class="input">
            <el-input placeholder="请输入" v-model="input" :disabled="true">
            </el-input>
          </div>
          <div class="input">
            <el-select v-model="region" placeholder="请选择">
              <el-option label="单选项1" value="0"></el-option>
              <el-option label="单选项2" value="1"></el-option>
            </el-select>
          </div>
          <div class="input">
            <el-input placeholder="请输入" v-model="input" :disabled="true">
            </el-input>
          </div>
          <div class="input">
            <el-select v-model="region1" multiple  placeholder="请选择">
              <el-option label="多选项1" value="0"></el-option>
              <el-option label="多选项2" value="1"></el-option>
            </el-select>
          </div>
          <div class="input">
            <el-input placeholder="请输入" v-model="input" :disabled="true">
            </el-input>
          </div>
          <div class="input">
            <el-select v-model="region1" multiple  placeholder="请选择">
              <el-option label="多选项1" value="0"></el-option>
              <el-option label="多选项2" value="1"></el-option>
            </el-select>
          </div>
          <div class="input">
            <el-date-picker
      v-model="time1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
          </div>
          <div class="input">
            <el-date-picker
      v-model="time1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
          </div>
        </div>
      </div>
    </div>
    <div class="divider">
      <div class="xian"></div>
      <div class="conter">
        <div class="num">2</div>
        <div class="txt">补充协议</div>
      </div>
      <div class="xian"></div>
    </div>
    <div class="bcxy">
      <div class="left">
        <div class="left-item" v-for="(item,index) in list" :key="index" :class="index == indexx ? 'color' :''" @click="indexx = index">
        {{ item }}
        </div>
      </div>
      <div class="right">
        <el-button type="primary">新增</el-button>
      </div>
    </div>
    <div class="inputx">
      <div class="toptxt">
        <span>协议内容</span>
        <div class="del">删除</div>
      </div>
      <div class="index">
        <textarea name="" id="" cols="30" rows="10" class="index-input"></textarea>
      </div>
    </div>
    <div class="bc">
      <el-button type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      value: '0',
      input: '',
      value1: '0',
      value2: '',
      tableData: [{
        date: '123123',
        name: '宁波九州通药业有限公司',
        address: '浙江省'
      }, {
        date: '32423',
        name: '国药控股精华有限公司',
        address: '浙江省'
      }, {
        date: '235235',
        name: '老百姓药业有限公司',
        address: '浙江省'
      }],
      time: ['2024-01-02', '2024-02-20'],
      region:'0',
      region1:'0',
      time1:'2024-01-02',
      list:['补充协议1','补充协议2','补充协议3'],
      indexx:0
    }
  },
  methods: {
    change() {
      console.log(this.time);
    }
  }
}
</script>
<style lang="less" scoped>
.titlebox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px 20px 5px;
}

.divider {
  display: flex;
  width: 95%;
  align-items: center;
  justify-content: space-between;
  margin: 20px auto;
  flex-wrap: wrap;

  .xian {
    width: calc(50% - 150px);
    height: 0.1px;
    border: 1px dashed #dadada;
  }

  .conter {
    display: flex;
    align-items: center;
    width: 100px;
    justify-content: center;

    .num {
      width: 20px;
      height: 20px;
      color: #fff;
      background: #4d8cff;
      border-radius: 50%;
      line-height: 20px;
      text-align: center;
      margin-right: 10px;
    }
  }
}

.input-box {
  display: flex;
  width: 95%;
  background: #fff;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  flex-wrap: wrap;


  .left,
  .right {
    width: 50%;

    .xz {
      width: 100px;
      height: 30px;
      font-size: 16px;
      text-align: center;
      line-height: 30px;
      border-radius: 5px;
      border: 1px solid #dadada;
      margin-right: 10px;
    }

    .item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .item-txt {
        font-size: 15px;
      }

      .item-title {
        margin-left: 10px;
      }

      .disabled {
        width: 30%;
      }

      .item-qy {
        width: 70px;
        height: 30px;
        display: flex;
        align-items: center;
        border: 1px solid #4d8cff;
        border-radius: 5px;
        font-size: 14px;
        color: #4d8cff;
        justify-content: space-around;
        background-color: rgba(122, 167, 252, 0.1);
      }
    }
  }

  .el-select {
    width: 100px;
    height: 30px;
    margin-right: 10px;
  }

  /deep/.el-input__inner {
    height: 30px;
  }

  /deep/.el-input__icon {
    line-height: 30px;
  }

  .right {
    width: 50%;

    .top {
      .el-select {
        width: 200px;
        height: 30px;
        margin-right: 10px;
      }
    }

    .time {
      .el-date-editor.el-input {
        width: 350px;
      }
    }

  }

  .table {
    width: 90%;
    margin: 20px auto;

  }
}

.titlelist {
  width: 95%;
  margin: 0 auto;
  display: flex;
  font-size: 14px;
  align-items: center;

  .list {
    margin-right: 25px;
    color: #757575;

    span {
      font-size: 16px;
      color: #646464;
      font-weight: 600;
      margin-right: 20px;
    }
  }
}

.cp {
  width: 95%;
  margin: 20px auto;
  background: #fff;
  padding: 15px;

  .cp-topbox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .cp-item {
      margin-left: 80px;

      .xz {
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #a1a1a1;
        border-radius: 5px;
        margin-right: 20px;
      }

      .color {
        color: #4d8cff;
        font-size: 16px;
      }
    }

    .cp-item,
    .cp-top {
      display: flex;
      align-items: center;


    }

    .left {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .del {
      color: #ff9e18;
      width: 60px;
      height: 30px;
      border: 1px solid #d8d8d8;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
    }
  }
}

.box {
  border: 1px solid #eeeeee;
  margin-top: 20px;
}

.top {
  display: flex;
  margin: 0 auto;
  flex: 1;
  justify-content: space-between;
  height: 40px;
  background: #f8f8f8;
  color: #757575;
  text-align: center;
  line-height: 40px;
  border-bottom: 1px solid #eeeeee;

  .top-item {
    width: 12.5%;
  }
}

.bottom {
  display: flex;
  flex: 1;
  width: 98%;
  margin: 0 auto;
  justify-content: space-between;
  margin: 10px auto;

  .input {
    width: 11%;
    .el-date-editor.el-input{
      width: 100%;
    }
  }

}

.xian {
  width: 100%;
  height: 1px;
  background: #d8d8d8;
  margin-top: 20px;
}
.bcxy{
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .left{
    display: flex;
    width: 40%;
    .left-item{
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #fff;
      border: 1px solid #a1a1a1;
      color: #a1a1a1;
      font-size: 15px;
    }
    .color{
      color: #2c99fe;
      font-weight: 600;
    }
  }
  .right{
    margin-top: -10px;
  }
}
.inputx{
  width: 95%;
  height: 300px;
  background: #fff;
  margin: 0 auto;
  .toptxt{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 15px;
  }
  .del{
    color: #ff9e18;
      width: 60px;
      height: 30px;
      border: 1px solid #d8d8d8;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
  }
  .index{
    display: flex;
    justify-content: center;
  }
  .index-input{
    width: 98%;
    margin: 0px auto;
    height: 180px;
    background: #dadada;
    border: none;
    resize: none;
    
  }
}
.bc{
  margin-top: 40px;
  width: 100%;
  background: #fff;
  height: 60px;
  box-sizing: border-box;
  padding: 10px 2%;
}
</style>